@extends('backend::layout')

@section('title', '干预训练记录列表')

@section('content')
    <div class="card border-no">
        <div class="card-body">
            <div class="row">
                <div class="col-lg-12 col-sm-12 col-xs-12 chart">
                    <div class="info-box">
                        <canvas id="canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop


@section('script')
    <script>


        function createConfig(data, title) {
            return {
                type: 'bar',
                data: {
                    labels: ['基础版', '进阶版', '高阶版'],
                    datasets: data
                },
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: title
                    },
                    scales:{
                        yAxes:[{
                            ticks:{
                                stepSize:1,
                                beginAtZero:true
                            }
                        }]
                    }
                }
            };
        }

        window.onload = function () {
            $.get('{{route("admin.analysis.getsuccessdata")}}', function (data) {
                if (data.status == 200) {
                    var color = Chart.helpers.color;
                    var colorNames = Object.keys(window.chartColors);
                    console.log(data.data);
                    var result = data.data;
                    var colorNum = 0;
                    var data = []
                    $.each(result, function (i, val) {
                        console.log(val)
                        var age = {};
                        var colorName = colorNames[colorNum % colorNames.length];
                        colorNum++;

                        age.borderColor = window.chartColors[colorName];
                        age.backgroundColor = color(window.chartColors[colorName]).alpha(0.5).rgbString();
                        age.fill = false;
                        age.label = i == 0 ? "失败" : "成功";
                        age.data = val;

                        data.push(age);
                    })

                    var thisconfig = createConfig(data, "培训成功失败统计");
                    console.log(thisconfig);

                    var ctx = document.getElementById('canvas').getContext('2d');
                    //var chart = new Chart(ctx, thisconfig);
                    window.myBar = new Chart(ctx, thisconfig);
                }
            });
        };

    </script>
@stop